<template>
    <view class="container">
        <view class="content-ul">
            <view class="content-li" v-for="item in noticeList" :key="item.id">
                <view class="content-li-top">
                    <u-text
                        :text="item.title"
                        size="30rpx"
                        bold
                        color="#000000"
                        :lines="2"
                        margin="0 30rpx 0 0"
                    ></u-text>
                    <view class="content-dot"></view>
                </view>
                <view class="content-li-info">
                    {{ item.content }}
                </view>
                <view class="content-li-date">{{ item.createAt|dateFormat }}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { getNoticeData } from "@/config/api"
    import { parseTime } from "@/untils"
    export default {
        name: "index",
        data() {
            return {
                listQuery: {
                    page: 1,
                    list_rows: 10
                },
                total: 0,
                noticeList: []
            }
        },
        filters: {
          dateFormat(val) {
              return parseTime(val, '{y}.{m}.{d} {h}:{i}')
          }
        },
        onLoad() {
            this.getData()
        },
        methods: {
            async getData() {
                const res = await getNoticeData(this.listQuery)
                this.total = res.total
                this.noticeList = res.items
            }
        }
    }
</script>

<style lang="scss" scoped>
    page { background: #F8F8F8 }
    .container {
        padding: 1rpx;
        .content-ul {
            padding: 0 26rpx;
            .content-li {
                margin-top: 30rpx;
                background: #FFFFFF;
                border-radius: 12rpx;
                padding: 40rpx 30rpx;
                .content-li-top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .content-title {
                        font-size: 30rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #000000;
                    }
                    .content-dot {
                        width: 18rpx;
                        height: 18rpx;
                        background: #356CE7;
                        border-radius: 50%;
                    }
                }
                .content-li-info {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #4A4A4A;
                    text-indent: 2em;
                    margin: 25rpx 0;
                }
                .content-li-date {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #B6B6B6;
                }
            }
        }
    }
</style>
